<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书上传</title>
</head>
<link rel="stylesheet"
      href="/assets/css/dropzone.css" />
<script type="text/javascript"
        src="/assets/libs/jquery.min.js"></script>
<script type="text/javascript"
        src="/assets/js/dropzone.js"></script>
<body>
<h2>文件上传</h2>
<select id="cls"></select>
 <div id="dropz" class="dropzone"></div>
<script>
    $.ajax({
        type: 'get',
        url: '/book/bookClass/selectAll',
        contentType: "application/json",
        success: function(r){
            $.each(r.data,function(index,value){
                $("#cls").append("<option value='" + value.bookClassId + "'>" + value.className + "</option>");
            });
        }
    });
    //通过js穿件Dropzone我们先设置autoDiscover为false,这样div里就不会去创建了
    try {
        Dropzone.autoDiscover = false;
        $("#dropz")
            .dropzone(
                {
                    url : "/book/file/uploads",
                    addRemoveLinks : true,
                    dictRemoveLinks : "x",
                    dictCancelUpload : "x",
                    uploadMultiple:true,//这里设置为false我们dropzone也可以一次拖N个文件，发N个请求 。只不过在后台是一个一个上传的，如果设为true后台一次性上传
                    maxFiles : 10,
                    maxFilesize : 50,
                    acceptedFiles : ".jpg,.png,.txt,.zip,.rar,.pdf",
                    dictMaxFilesExceeded : "您一次最多只能上传{{maxFiles}}个文件",
                    dictFileTooBig : "文件过大({{filesize}}MB). 上传文件最大支持: {{maxFilesize}}MB.",
                    dictResponseError : "文件上传失败!请检查后台文件大小限制",
                    dictInvalidFileType : "你不能上传该类型文件,文件类型只能是*.xls。",
                    dictCancelUpload : "取消上传",
                    dictCancelUploadConfirmation : "你确定要取消上传吗?",
                    dictRemoveFile : "移除文件",
                    init : function() {
                        this.on("removedfile", function(file) {
                            //移除文件事件
                            console.log("File " + file.name
                                + " removed");
                        });
                        this.on("addedfile", function(file) {
                            //添加文件
                            document.cookie = "cls=" + $("#cls").val();
                            console.log(document.cookie);
                            console.log("File " + file.name
                                + " 被添加");
                        });
                        this.on("success", function(file, data) {
                            //单文件成功
                            alert("success");
                            console.log("File" + file.name
                                + " 上传成功");
                            console.log(data);
                        });
                        /* this.on("successmultiple", function(file, data) {
                            //多文件成功  多文件上传在用这个 一次性提示
                            alert("success");
                            console.log("File" + file.name
                                    + " 上传成功");
                            console.log(data);
                        }); */
                        this.on("error", function(file) {
                            //文件失败 只要前后台统一好文件最大值 正常不会执行到这个地方的
                            alert("上传失败");
                        });
                    }
                });
    } catch (e) {
        alert('浏览版本过低，不支持文件上传!');
    }

</script>
</body>
</html>